<template>
  <div class="vue-video clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/hilongjw/vue-video">https://github.com/hilongjw/vue-video</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm i vue-video --save<br>
            <br>
            import myVideo from 'vue-video'<br>
            // data
            video: {<br>
              &nbsp;&nbsp;sources: [{<br>
                &nbsp;&nbsp;&nbsp;&nbsp;src: '',  // 视频url<br>
                &nbsp;&nbsp;&nbsp;&nbsp;type: 'video/mp4'<br>
              &nbsp;&nbsp;}],<br>
              &nbsp;&nbsp;options: {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;autoplay: true,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;volume: 0.6,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;poster: ''  // 封面<br>
              &nbsp;&nbsp;}<br>
            }
          </code>
        </div>
      </el-card>
      <div class="container">
        <my-video :sources="video.sources" :options="video.options"></my-video>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import myVideo from 'vue-video'
export default {
  name: 'VueVideo',
  data () {
    return {
      video: {
        sources: [{
          src: 'http://7xkwa7.media1.z0.glb.clouddn.com/sample_video_L',
          type: 'video/mp4'
        }],
        options: {
          autoplay: true,
          volume: 0.6,
          poster: 'http://covteam.u.qiniudn.com/poster.png'
        }
      }
    }
  },
  components: {
    myVideo
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-video{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
